<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			border: 5px solid #000;
			/*background: red url() 0 0 no-repeat;
			background: #A349A4 url() 0 0 no-repeat;
			background: rgb(163,43,164) url() 0 0 no-repeat;
			background: rgba(163,43,164,0.5) url() 0 0 no-repeat;*/
			background: #fff url(./pro.jpg) -50px -50px no-repeat;
			/*background-size: cover;*/

			/*background: #fff url(./bg.png) 0px 0px no-repeat;
			background-size: cover;*/

		}
		body{
			/*background: red url() 0 0 no-repeat;*/

		}
		.tool{
			width: 32px;
			height: 220px;
		}
		.item{
			width: 32px;
			height: 32px;
			background: #7A6E6E url(./tool.png) 0 0  no-repeat;
			margin-top: 5px;
			list-style: none;
			border-radius: 5px;
		}
		.img1{
			background-position: -88px -175px;
		}
		.img2{
			background-position: -50px 0px;
		}
		.img3{
			background-position: -50px -50px;
		}
	</style>
</head>
<body>
	<!-- 背景精灵、雪碧图 -->
	<!-- <div class="box"></div> -->
	<ul class="tool">
		<li class="item img1"></li>
		<li class="item img2"></li>
		<li class="item img3"></li>
		<li class="item img4"></li>
		<li class="item img5"></li>
	</ul>
</body>
</html>